<!-- 置顶组件 -->
<template>
  <view>
    <uni-transition mode-class="fade" :styles="customStyle" :show="isShow">
      <view class="back-top border-radius-c" @click="backToTop()">
        <text class="iconfont icon-zhiding" />
      </view>
    </uni-transition>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect } from 'vue';

  const props = defineProps({
    scrollTop: {
      type: Number,
      default: () => 0,
    },
  });

  const emits = defineEmits(['click']);

  const isShow = ref<boolean>(false);

  watchEffect(() => {
    isShow.value = props.scrollTop > 400;
  });

  const customStyle = reactive({
    bottom: '100px',
    right: '20px',
    width: '40px',
    height: '40px',
    position: 'fixed',
    zIndex: 10,
  });

  const backToTop = () => {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 120,
    });
    emits('click');
  };
</script>

<style lang="scss" scoped>
  .back-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: center;
    background-color: #f5f5f5;

    text {
      font-size: 56rpx;
      transform: scale(0.8);
      color: #ff6a6c;
    }
  }
</style>
